import React from 'react';
import {Modal, Button, Card} from 'antd';

import './ui.scss';

export default class RModal extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      modal1: false,
    }
  }

  handleModal() {
    this.setState({
      modal1: !this.state.modal1
    })
  }

  confrim() {
    return (
      Modal.confirm({
        title: 'react',
        content: 'react,react',
        onText: '确认',
        cancalText: '取消',
        centered: true,
        wrapClassName:'center-center',
        onOk: () => {
          console.log(this)
        },
        onCancel: () => {
          console.log(this)
        }
      })
    )
  }

  render() {
    return (
      <div className="modal-component">
        <Card title="提示框">
          <Button type="primary" onClick={() =>this.handleModal()}>弹框1</Button>
          <Button type="primary" onClick={this.confrim.bind(this)}>弹框2</Button>
        </Card>
        <Modal
          title='react'
          visible={this.state.modal1}
          onCancel={() => this.setState({
            modal: !this.state.modal
          })}
          onOk={() => this.setState({
            modal: !this.state.modal
          })}
          footer={[
            <Button key="back" onClick={() => this.setState({ modal1: !this.state.modal1 })}>Return</Button>,
            <Button key="submit" type="primary" onClick={() => this.setState({ modal1: !this.state.modal1 })}> Submit </Button>,
          ]}
          centered
        >
          <p>antd-modal</p>
        </Modal>
      </div>
    )
  }
}